<script lang="jsx">
  import { defineComponent } from 'vue';
  import { tagsStore, useAuthStore } from '@/stores';
  export default defineComponent({
    setup() {
      const router = useRouter();
      const transformRouters = (routers) => {
        return routers
          .filter((i) => i.meta.nav !== false && i.meta.display)
          .map((routerItem) => {
            const { meta, path, children } = routerItem;
            if (children && children.length) {
              return {
                ...meta,
                path,
                children: transformRouters(children)
              };
            } else {
              return {
                ...meta,
                path
              };
            }
          });
      };
      const onMenuItemTitleClick = (menuItem, functionItem) => {
        const { menuType = 1 } = menuItem;
        if (menuType !== 2) return;
        const auth = tagsStore();
        auth.setNavList(menuItem, functionItem);
        if (menuItem.path) {
          router.push(menuItem.path);
        }
      };
      const { menuList: routes } = useAuthStore();
      const menuList = reactive(transformRouters(routes));
      console.log(menuList, 'menuList');
      const getMenu = (menu) => {
        return menu.map((item) => {
          if (item.children && item.children.length) {
            const slots = {
              title: () => {
                return <div>{item.title}</div>;
              }
            };
            return (
              <NstdSubMenu v-slots={slots} index={item.path}>
                {getMenu(item.children)}
              </NstdSubMenu>
            );
          } else {
            return (
              item.display === 1 && (
                <NstdMenuItem
                  index={item.path}
                  onClick={() => {
                    onMenuItemTitleClick(item, { title: '' });
                  }}
                >
                  {item.title}
                </NstdMenuItem>
              )
            );
          }
        });
      };
      return () => (
        <NstdMenu mode="horizontal" ellipsis={false}>
          {getMenu(menuList)}
        </NstdMenu>
      );
    }
  });
</script>
